// 全局图表配置
export const chartConfig = {
  // 通用配置
  common: {
    title: {
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#303133'
      }
    },
    tooltip: {
      textStyle: {
        fontSize: 12
      }
    },
    legend: {
      textStyle: {
        fontSize: 12
      }
    }
  },

  // 网格配置 - 优化为正常宽度
  grid: {
    standard: {
      left: '8%',
      right: '8%',
      bottom: '15%',
      top: '15%',
      containLabel: true
    },
    wide: {
      left: '5%',
      right: '5%',
      bottom: '12%',
      top: '12%',
      containLabel: true
    },
    compact: {
      left: '10%',
      right: '10%',
      bottom: '18%',
      top: '18%',
      containLabel: true
    },
    heatmap: {
      height: '70%',
      top: '15%',
      left: '8%',
      right: '8%'
    }
  },

  // 轴标签配置
  axisLabel: {
    fontSize: 12,
    margin: 10,
    color: '#606266'
  },

  // 柱状图配置
  bar: {
    width: '60%', // 调整为正常宽度
    label: {
      fontSize: 12,
      color: '#303133'
    },
    itemStyle: {
      borderRadius: [4, 4, 0, 0] // 添加圆角
    }
  },

  // 折线图配置
  line: {
    symbolSize: 6,
    lineStyle: {
      width: 2
    },
    smooth: true
  },

  // 饼图配置
  pie: {
    radius: ['35%', '65%'], // 调整为正常大小
    center: ['50%', '50%'], // 居中显示
    emphasis: {
      label: {
        fontSize: '18',
        fontWeight: 'bold'
      }
    }
  },

  // 漏斗图配置
  funnel: {
    width: '70%', // 调整为正常宽度
    height: '75%',
    left: '15%',
    top: '10%',
    gap: 2,
    label: {
      fontSize: 12,
      color: '#fff'
    }
  }
}

// 颜色配置
export const colors = {
  primary: ['#5470c6', '#91cc75', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
  gradient: ['#667eea', '#764ba2', '#f093fb', '#f5576c', '#4facfe', '#00f2fe'],
  warning: ['#f56c6c', '#e6a23c', '#409eff', '#67c23a', '#909399'],
  heatmap: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffcc', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
}

// 响应式配置
export const responsive = {
  height: {
    desktop: 450,
    tablet: 400,
    mobile: 350
  },
  breakpoints: {
    desktop: 1200,
    tablet: 768,
    mobile: 480
  }
}

// 工具函数
export const getChartHeight = (screenWidth) => {
  if (screenWidth >= responsive.breakpoints.desktop) {
    return responsive.height.desktop
  } else if (screenWidth >= responsive.breakpoints.tablet) {
    return responsive.height.tablet
  } else {
    return responsive.height.mobile
  }
}

// 应用通用配置
export const applyCommonConfig = (option) => {
  // 应用通用标题样式
  if (option.title) {
    option.title = { ...chartConfig.common.title, ...option.title }
  }

  // 应用通用网格配置
  if (option.grid && typeof option.grid === 'string') {
    option.grid = chartConfig.grid[option.grid] || chartConfig.grid.standard
  } else if (!option.grid) {
    option.grid = chartConfig.grid.standard
  }

  // 应用通用系列配置
  if (option.series) {
    option.series.forEach(series => {
      if (series.type === 'bar') {
        series.barWidth = series.barWidth || chartConfig.bar.width
        series.itemStyle = { ...chartConfig.bar.itemStyle, ...series.itemStyle }
      } else if (series.type === 'line') {
        series.symbolSize = series.symbolSize || chartConfig.line.symbolSize
        series.lineStyle = { ...chartConfig.line.lineStyle, ...series.lineStyle }
        series.smooth = series.smooth !== undefined ? series.smooth : chartConfig.line.smooth
      } else if (series.type === 'pie') {
        series.radius = series.radius || chartConfig.pie.radius
        series.center = series.center || chartConfig.pie.center
        if (series.emphasis && series.emphasis.label) {
          series.emphasis.label = { ...chartConfig.pie.emphasis.label, ...series.emphasis.label }
        }
      } else if (series.type === 'funnel') {
        series.width = series.width || chartConfig.funnel.width
        series.height = series.height || chartConfig.funnel.height
        series.left = series.left || chartConfig.funnel.left
        series.top = series.top || chartConfig.funnel.top
        series.gap = series.gap || chartConfig.funnel.gap
      }
    })
  }

  return option
}

// 获取响应式网格配置
export const getResponsiveGrid = (chartType = 'standard') => {
  const screenWidth = window.innerWidth
  const baseGrid = chartConfig.grid[chartType] || chartConfig.grid.standard
  
  if (screenWidth < responsive.breakpoints.mobile) {
    return {
      ...baseGrid,
      left: '12%',
      right: '12%',
      bottom: '20%',
      top: '20%'
    }
  } else if (screenWidth < responsive.breakpoints.tablet) {
    return {
      ...baseGrid,
      left: '10%',
      right: '10%',
      bottom: '18%',
      top: '18%'
    }
  }
  
  return baseGrid
}

// 默认导出
export default {
  chartConfig,
  colors,
  responsive,
  getChartHeight,
  applyCommonConfig,
  getResponsiveGrid
} 